<template>
  <div class="detail">
    <el-row :gutter="10">
      <el-card class="head">
        <div>
          <span class="basic" @click="handleClick('cardetail')">基本信息</span>
          <span class="info" @click="handleClick('driverdetail')">驾驶证信息</span>
        </div>
      </el-card>
    </el-row>
    <component :is="compName" :component-data="componentData" />
  </div>
</template>

<script>
import cardetail from './components/cardetail.vue'
import driverdetail from './components/driverdetail.vue'
export default {
  components: { cardetail, driverdetail },
  data() {
    return {
      componentData: 'driverdetail',
      compName: 'cardetail'
    }
  },
  created() {
    this.componentData = this.$route.query.id
  },
  // 切换组件
  methods: {
    handleClick(comp) {
      this.compName = comp
      if (comp === 'cardetail') {
        this.componentData = this.$route.query.id
        console.log(this.componentData)
      } else {
        this.componentData = this.$route.query.id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail{
    .head {
      margin-top: 20px;
      padding-left: 100px;
      span {
        font-size: 16px;
        font-weight: 600;
      }
      .info {
        margin-left: 20px;
      }
    }

  }
</style>
